<template>
  <div style="padding: 8px; position: relative;">
    <!-- 消息提醒组件 -->
    <el-badge :value="reminderCount" class="item" :hidden="reminderCount === 0">
      <el-icon @click="isReminderDialogOpen = true" style="cursor: pointer; font-size: 24px; color: #333;">
        <Bell />
      </el-icon>
    </el-badge>
    <!-- 原有的骨架屏 -->
    <el-skeleton :rows="10" :loading="data.isFirst" animated>
      <div class="main">
        <div class="selectkey">
          <div style="padding: 8px; padding-left: 25px">
            <el-button type="primary" @click="events.addcust">新增</el-button>
          </div>
          <div style="padding: 8px; padding-left: 300px">
            <el-input
              v-model="data.key"
              style="width: 400px"
              placeholder="请输入关键字"
              class="input-with-select"
              clearable
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>
        <div class="card">
          <el-card
            @click="events.detail(client.id)"
            v-for="client in data.data"
            :key="client.id"
            style="width: 310px; height: 150px"
            shadow="hover"
          >
            <div style="display: flex">
              <div class="name">
                <span style="font-weight: bold">{{ client.name }}</span>
              </div>
              <div style="padding: 4px; padding-left: 36px">
                <icon class="phone-icon">📞</icon>
                <span style="font-weight: bold" class="contact-value">{{
                  client.phone
                }}</span>
              </div>
            </div>
            <div
              style="border-bottom: 1px solid #e3e3e3; padding-top: 15px"
            ></div>

            <div style="display: flex">
              <div class="count">
                <span style="font-weight: lighter; font-size: 13px"
                  >跟进次数:
                </span>
                <span style="font-weight: bold">{{ client.count }}</span>
              </div>
              <div class="genj">
                <span style="font-weight: lighter; font-size: 13px"
                  >最后跟进:
                </span>
                <span style="font-weight: bold">{{ client.next_time }}</span>
              </div>
            </div>

            <div style="text-align: right">
              <el-button
                type="primary"
                class="action-btn"
                @click.stop="events.customer_record(client.id)"
                size="small"
              >
                添加跟进
              </el-button>
            </div>

          </el-card>
        </div>

        <div style="padding-top: 10px; padding-bottom: 8px; padding-left: 5px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="data.pages?.total"
            @current-change="events.handleCurrentChange"
          />
        </div>
      </div>

      <el-drawer
        :destroy-on-close="true"
        v-model="data.isOpen"
        title="客户跟进记录"
      >
        <record @add_record="events.add_record"></record>
      </el-drawer>
      <el-dialog
        :destroy-on-close="true"
        v-model="data.isRecord"
        title="新增跟进记录"
        width="750"
      >
        <add_recore @myclose="events.add_close"></add_recore>
      </el-dialog>
      <el-drawer
        :destroy-on-close="true"
        v-model="data.isDetailDrawerOpen"
        title="客户详情"
        direction="ttb"
        size="75%"
      >
        <updatedetail @updatedetail="events.updatedetail" :data="data.updateid"></updatedetail>
      </el-drawer>
    </el-skeleton>
    <!-- 消息提醒弹窗 -->
    <el-dialog
      v-model="isReminderDialogOpen"
      title="消息提醒"
      width="30%"
    >
        <ul>
          <li v-for="reminder in reminders" :key="reminder.id">
            {{ reminder.name }} 下次跟进时间：{{ reminder.next_time }}
          </li>
        </ul>
      <template #footer>
        <el-button @click="isReminderDialogOpen = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import updatedetail from "@/components/customer/updatedetail.vue";
import record from "@/components/customer/record.vue";
import add_recore from "@/components/customer/add_record.vue";
import router from "@/router";
import type { Customer_Index_Data } from "@/utils/type";
import { reactive, watchEffect, ref } from "vue";
import { Search, Bell } from "@element-plus/icons-vue";
import { Get_Customers } from "@/api/customer";

const data = reactive<Customer_Index_Data>({
  isFirst: true,
  isRecord: false,
  isOpen: false,
  isDetailDrawerOpen: false,
  updateid: "",
  data: [],
  key: "",
  pages: {
    page: 1,
    limit: 12,
    total: 0,
  },
});

// 新增消息提醒相关变量
const reminderCount = ref(0);
const reminders = ref<{ id: string; name: string; next_time: string }[]>([]);
const isReminderDialogOpen = ref(false);

const methods = {
  async bind() {
    data.loading = true;
    const res = await Get_Customers({
      page: data.pages?.page || 1,
      limit: data.pages?.limit || 16,
      key: data.key || "",
    });
    if (res.code === 0) {
      data.data = res.data.data.filter(c => ![0,2].includes(c.status));
      data.pages!.total = res.data.total;
      data.isFirst = false;
      data.loading = false;
      // 检查提醒
      checkReminders();
    }
  },
};

watchEffect(() => {
  methods.bind();
});

// 检查提醒逻辑
const checkReminders = () => {
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate() + 1);
  reminders.value = data.data.filter((client) => {
    const nextTime = new Date(client.next_time);
    return (
      nextTime.toDateString() === now.toDateString() ||
      nextTime.toDateString() === tomorrow.toDateString()
    );
  });
  reminderCount.value = reminders.value.length;
};

const events = {
  add_record() {
    data.isRecord = true;
  },

  add_close() {
    data.isRecord = false;
    // 添加跟进完成后刷新页面
    methods.bind();
  },

  updatedetail(id: string) {
    // 这里可以添加修改操作的逻辑
    // 修改完成后刷新页面
    methods.bind();
  },

  /**
   * 添加客户
   */
  addcust() {
    router.push("/customer/add");
  },

  /**
   * 删除
   * @param id
   */
  delte(id: string) {
    console.log(id, "删除");
  },

  /**
   * 详情
   */
  detail(id: string) {
    // console.log(id, "详情");
    sessionStorage.setItem("customer_id", id);
    data.updateid = id;
    data.isDetailDrawerOpen = true;
  },

  /**
   * 跟进
   */
  customer_record(id: string) {
    // console.log(id, "123456");
    sessionStorage.setItem("customer_id", id);
    data.isOpen = true;
  },

  handleCurrentChange(page: number) {
    data.pages.page = page;
    methods.bind();
  },
};
</script>

<style scoped>
.main {
  width: 99%;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.selectkey {
  display: flex;
}

.card {
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.name {
  padding: 4px;
  width: 102px;
}

.count {
  padding: 4px;
  padding-top: 14px;
  background: #f8fafc;
  border-radius: 8px;
  width: 102px;
}

.genj {
  padding: 4px;
  background: #f8fafc;
  border-radius: 8px;
  padding-left: 12px;
  padding-top: 14px;
}

.item {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
